import React, { Component } from 'react';
import {
    WhiteSpace,
    Flex,
    List,
    Button,
    Icon,
    Grid,
    Modal,
    Switch
} from 'antd-mobile';
import { connect } from 'dva';
import MyScroll from '../../components/MyScroll/MyScroll';
import NavTopBar from '../../components/NavTopBar/NavTopBar';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import { routerRedux } from 'dva/router';
const Item = List.Item;

import { merch_bill } from './MerchBill.less';

class MerchBill extends Component {
    constructor(props) {
        super(props);
        this.state = {
        };

    }


    componentDidMount() {
       if(this.props.order.list.length==0){
           this.props.dispatch({ type:'order/settlementEFF' });
       }
    }


    handlePayModel = (visible) => {
        this.setState({
            visible:visible
        })
    }

    render() {
        const { order, dispatch } = this.props;
        const { list } = order;

        console.log(list,this.props);


        return (
            <Flex
                style={{
                    height:"100%",
                    position:'relative',
                }}
                direction="column"
                className={ merch_bill }
            >
                <NavTopBar
                    dispatch={dispatch}
                    title="商品清单"
                    rightContent={
                        [
                            <span style={{ fontSize:"0.28rem", color:'#999' }} key="1">
                               共
                                {
                                    list.reduce((p,v,i,a)=>{
                                        return p+v.goodsNum
                                    },0)
                                }
                                件
                           </span>
                        ]
                    }
                >
                </NavTopBar>
                <MyScroll>
                    {
                        list.map((v,i,a)=>{

                            return (
                                <div  key={i}>
                                {/*<List key={i}  renderHeader={() =>{*/}
                                   {/*return (*/}
                                       {/*<Flex justify="between">*/}
                                           {/*<div>{v.storeName}</div>*/}
                                           {/*<Icon*/}
                                               {/*onClick={()=>{*/}
                                               {/*dispatch(routerRedux.push(`/store/${v.storeId}`));*/}
                                               {/*}}*/}
                                               {/*type="right" />*/}
                                       {/*</Flex>*/}
                                       {/*)*/}
                                {/*} }>*/}
                                    {
                                        v.list.map((vv,ii,aa)=>{

                                            return (
                                                <Flex className="good" key={`${i}_${ii}`}>
                                                    <div
                                                        onClick={()=>{
                                                            dispatch(routerRedux.push(`/goodsDetail/${vv.specId}`));
                                                        }}
                                                        className="good_img"
                                                    >
                                                        <NoLazyImg src={vv.goodsImages} />
                                                    </div>
                                                    <Flex.Item>
                                                        <Flex style={{ height:"1.7rem" }} direction="column" justify="between">
                                                            <div
                                                                onClick={()=>{
                                                                    dispatch(routerRedux.push(`/goodsDetail/${vv.specId}`));
                                                                }}
                                                                className="good_name text-two-eli"
                                                            >
                                                                { vv.goodsName }
                                                            </div>
                                                            <div
                                                                className="good_info"
                                                                dangerouslySetInnerHTML={{ __html: vv.specInfo }}
                                                            />
                                                            <Flex justify="between" className="good_price">
                                                                <div>￥{vv.goodsPrice}</div>
                                                                <div>x{vv.goodsNum}</div>
                                                            </Flex>
                                                        </Flex>
                                                    </Flex.Item>
                                                </Flex>
                                            )
                                        })
                                    }
                                {/*</List>*/}
                                </div>
                            )
                        })
                    }

                </MyScroll>

            </Flex>
        )
    }
}

export default connect(({order})=>({order}))(MerchBill);
